<template>
	<Page>
		<Topbar hideMenu />
		<Content>
			<Panel>
				<view class="left">
					<Info :data="workInfo" :state="state" backUrl="/pages/workbench/production/index"
						@openCuttingPlan="openCuttingPlan" />
				</view>
				<view class="right">
					<Empty
						:text="(workInfo.state === '调机完成' || workInfo.state === '生产') ? '当前工单正在生产中...' : '当前工单已中断，请手动恢复...' " />
					<div class="btn-group">
						<Button large type="primary" @click="open1" v-if="workInfo.state === '调机完成'">
							开始
						</Button>
						<Button large type="primary" @click="open2" v-if="workInfo.state === '生产'">
							完成
						</Button>
						<Button large type="success" @click="open3" v-if="workInfo.state === '生产'"
							style="margin-left: 3rem;">
							中断
						</Button>
						<Button large type="success" @click="open4" v-if="workInfo.state === '中断'"
							style="margin-left: 3rem;">
							恢复
						</Button>
					</div>
				</view>
			</Panel>
		</Content>
		<Modal title="确认开始吗？" ref="popup1" @confirm="confirm1" />
		<Modal title="确认完成吗" ref="popup2" @confirm="confirm2" />
		<Modal title="确认中断吗？" ref="popup3" @confirm="confirm3" />
		<Modal title="请选择中断原因" ref="popup3" @confirm="confirm3">
			<uni-data-select v-model="interruptReason" label="中断原因" :modelValue="interruptReason"
				:localdata="interruptReasons" format="{label}" placeholder="请选择" :clear="false"></uni-data-select>
		</Modal>
		<Modal title="确认恢复吗？" ref="popup4" @confirm="confirm4" />
		<ModalCuttingPlan ref="modalCuttingPlan" @openModalPrintLabel="openModalPrintLabel"></ModalCuttingPlan>
		<ModalPrintLabel ref="modalPrintLabel" :labelTypes="[{label: '条料标签',value: '条料标签'}]"></ModalPrintLabel>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Empty from "@/components/empty/index.vue";
	import Button from "@/components/button/index.vue";
	import Info from "@/components/info/index.vue";
	import Modal from '@/components/modal/index.vue';
	import ModalCuttingPlan from '@/components/operate/modal-material-cutting-plan/index.vue';
	import ModalPrintLabel from '@/components/operate/modal-print-label/index.vue';
	import fetch from "@/utils/fetch";

	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			Info,
			Empty,
			Button,
			Modal,
			ModalCuttingPlan,
			ModalPrintLabel
		},
		data() {
			return {
				interruptReasons: [],
				interruptReason: '',
				workInfo: {}
			}
		},
		methods: {
			getWorkOrderInfo(workCode) {
				fetch('get', '/dms/mobile/selectWorkByWorkCode', {
					workCode
				}).then((res) => {
					this.$set(this, 'workInfo', {
						...res,
						state: this.state || res.state,
					})
					this.state = this.state || res.state;
				});
			},
			openCuttingPlan() {
				this.$refs['modalCuttingPlan'].open(this.workInfo.cuttingPlanCode);
			},
			openModalPrintLabel(item) {
				this.$refs['modalPrintLabel'].open(item);
			},
			open1() {
				this.$refs.popup1.open()
			},
			open2() {
				this.$refs.popup2.open()
			},
			open3() {
				this.$refs.popup3.open()
			},
			open4() {
				this.$refs.popup4.open()
			},
			confirm1() {
				fetch('put', '/dms/mobile/startProduce', {
					workCode: this.workInfo.workCode,
					flag: 'false',
				}).then(() => {
					this.$toast('工单开始执行');
					this.state = null;
					this.getWorkOrderInfo(this.workInfo.workCode);
				});
			},
			confirm2() {
				fetch('put', '/dms/mobile/produceFinish', {
					workCode: this.workInfo.workCode
				}).then(() => {
					this.$toast('工单执行完成');
					this.goto('/pages/workbench/production/index');
				});
			},
			confirm3() {
				fetch('put', '/dms/mobile/interrupt', {
					workCode: this.workInfo.workCode,
					interruptReason: this.interruptReason,
				}).then(() => {
					this.$toast('工单中断成功');
					this.state = null;
					this.getWorkOrderInfo(this.workInfo.workCode);
				});
			},
			confirm4() {
				fetch('put', '/dms/mobile/restoreInterrupt', {
					workCode: this.workInfo.workCode,
				}).then(() => {
					this.$toast('工单恢复成功');
					this.state = null;
					this.getWorkOrderInfo(this.workInfo.workCode);
				});
			},
			goto(url) {
				uni.redirectTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
			getInterruptReasons() {
				fetch("get", "/dms/faultCategory/dictList", {
					name: "中断原因",
				}).then((res) => {
					this.interruptReasons = res.map(item => {
						return {
							label: item.value,
							value: item.value
						}
					});
					if (this.interruptReasons.length !== 0)
						this.interruptReason = this.interruptReasons[0].value;
				});
			}
		},
		onLoad(params) {
			this.state = params.state || null;
			this.flag = params.flag || null;
			this.getWorkOrderInfo(params.workCode);
			this.getInterruptReasons();
		}
	};
</script>

<style scoped lang="scss">
	.left {
		flex: 0 auto;
		width: 50rem;
		background: #f8f8fa;
	}

	.right {
		flex: 1;
		background-color: red;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 3rem 4rem 5rem;

		.btn-group {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>